<template>
  <div class="form-panel animate-fade" @keyup.enter="handleLogin">
    <div class="form-logo">
      <i class="fa fa-book"></i>
    </div>
    <h2 class="form-title">欢迎回来</h2>

    <div class="form-group">
      <label class="form-label">用户名/手机号</label>
      <div class="input-wrapper">
        <i class="fa fa-user"></i>
        <input
          type="text"
          class="form-input"
          placeholder="请输入用户名或手机号"
          v-model="loginForm.usernameOrPhone"
        />
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">密码</label>
      <div class="input-wrapper">
        <i class="fa fa-lock"></i>
        <input
          :type="loginForm.showPassword ? 'text' : 'password'"
          class="form-input"
          placeholder="请输入密码"
          v-model="loginForm.password"
        />
        <button
          type="button"
          class="toggle-password"
          @click="loginForm.showPassword = !loginForm.showPassword"
        >
          <i
            :class="loginForm.showPassword ? 'fa fa-eye' : 'fa fa-eye-slash'"
          ></i>
        </button>
      </div>
    </div>

    <div class="form-actions">
      <label class="checkbox-label">
        <input type="checkbox" v-model="loginForm.remember" /> 记住我
      </label>
      <a href="#" class="forgot-link">忘记密码?</a>
    </div>

    <button class="submit-btn" @click="handleLogin">登录</button>
	<!-- <input type="submit" class="submit-btn" @click="handleLogin" value="登录"> -->

    <div class="social-login">
      <p class="divider">
        <span>其他登录方式</span>
      </p>
      <div class="social-buttons">
        <button class="social-btn wechat">
          <i class="fa fa-weixin"></i>
        </button>
        <button class="social-btn qq">
          <i class="fa fa-qq"></i>
        </button>
        <button class="social-btn google">
          <i class="fa fa-google"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import { useRouter } from 'vue-router';
import { login } from '@/api/internal-api/auth/auth-api'
import { alertInfo, alertSuccess } from '@/util/alert';
import { useAuthStore } from '@/stores/auth-store';

// const props = defineProps({
//   registeredAccount: {
//     type: Object,
//     required: false,
//   },
// });

const router = useRouter()

// 表单数据
const loginForm = reactive({
  usernameOrPhone: "",
  password: "",
  showPassword: false,
  remember: false,
});

const authStore = useAuthStore()

watch(authStore.registeredAccount, () => {
	loginForm.usernameOrPhone = authStore.registeredAccount.usernameOrPhone
	loginForm.password = authStore.registeredAccount.password
})

// 登录处理
const handleLogin = async () => {
  // 简单验证
  if (!loginForm.usernameOrPhone) {
    alertInfo("请输入用户名或手机号");
    return;
  }

  if (!loginForm.password) {
    alertInfo("请输入密码");
    return;
  }
  
  if (await login(loginForm.usernameOrPhone, loginForm.password)) {
	alertSuccess("登录成功！")
	router.push('/subject/english')
  }
};



</script>

<style lang="scss" scoped>
@use '../style/form-style.scss';
</style>